<template>
  <div class="container">
    <div class="login-box">
      <el-form :model="loginRuleForm" :rules="loginRules" ref="loginRules" label-width="100px" class="demo-ruleForm">
        <el-form-item label="账号" prop="username">
          <el-input v-model="loginRuleForm.username"></el-input>
        </el-form-item>

        <el-form-item label="密码" prop="password">
          <el-input v-model="loginRuleForm.password"></el-input>
        </el-form-item>

        <el-button type="primary" @click="login">登陆</el-button>

      </el-form>
    </div>
  </div>
</template>

<script>
  // Vue 代码逻辑
  export default {
    data() {
    // 不使用return包裹的数据会在项目的全局可见，会造成变量污染,使用return包裹后数据中变量只在当前组件中生效，不会影响其他组件。
      return {
        // 表单请求数据
        loginRuleForm: {
          username: '',
          password: '',
        },
        // 表单验证规则
        loginRules: {
          username: [{         // 这里要跟prop一致
              required: true,  //验证规则  必填
              message: "请输入用户名",  // 出错的时候现实的消息
              trigger: "blur"         // 触发事件  blur指的是 光标离开的事件
            },
            {
              min: 3,
              max: 18,
              message: "长度在 3 到 18 个字符",
              trigger: "blur",
            },
          ],
          password: [{
              required: true,
              message: "请输入密码",
              trigger: "blur"
            },
            {
              min: 3,
              max: 18,
              message: "长度在 3 到 18 个字符",
              trigger: "blur",
            }
          ]
        }
      };
    },
    // 使用 methods 属性给 Vue 定义方法
    methods: {
      login() {
        // 登陆进行规则的校验，只有校验成功才能登陆,vaild=>所有的规则校验都成立才会进入到这里
        // this.$refs获取到所有 ref="xxxx"的变量
        // validate方法是elment验证框架自带的函数
        this.$refs.loginRules.validate((vaild) => { //vaild验证的结果，再来一个匿名的函数，来根据结果进行下一步的处理
            if (!vaild) return; // 验证失败
              // 跳转到主页
              // this 当前这个Vue实例
              // $router
              this.$router.push("/home");
              this.$message.success("HI! " + this.loginRuleForm.username + " 欢迎来到xxx管理平台！");    
          })
        }
      }
  }
</script>

<style>
  .container{
    min-height: 750px;
    background-image: url('../../assets/bg-login.jpg');
    background-repeat: no-repeat;
    background-size: cover;
  }

  .login-box{
    width: 500px;
    margin: 0 auto; /* 上下0    左右自动*/
    padding: 200px;
  }
</style>
